/*
 * @Description: 大前端学习
 * @Version: H5
 * @Author: Ajax
 * @Date: 2020-05-24 20:50:28
 * @LastEditors: Ajax
 * @LastEditTime: 2020-05-24 22:25:42
 */

/** 思路
 * 1 获取大盒子的总宽度
 * 2 获取li的宽度
 * 3 求出列数
 * 4 求出间距
 * 5 瀑布流方法
 * 6 滚动页面模拟懒加载
 */


/** 1 参数  */
const bigBox = document.querySelector('.box')
const bigBoxWidth = bigBox.offsetWidth
const lis = bigBox.children[0].children
const onlyWidth = lis[0].offsetWidth

/** 3 列数 */
const column = parseInt(bigBoxWidth / onlyWidth)

/** 4 间距 */
const distance = (bigBoxWidth - onlyWidth * column) / (column - 1)

/** 5 瀑布流方法 */
let arrHeight = []
function waterFull() {
    for (let i = 0, len = lis.length; i < len; i++) {
        if (i < column) {
            lis[i].style.left = (onlyWidth + distance) * i + 'px'
            arrHeight[i] = lis[i].offsetHeight
        } else {
            let minHeight = getMin(arrHeight).min
            let minIndex = getMin(arrHeight).index
            lis[i].style.left = (onlyWidth + distance) * minIndex + 'px'
            lis[i].style.top = (minHeight + distance) + 'px'

            arrHeight[minIndex] = minHeight + distance + lis[i].offsetHeight
        }
    }



}
waterFull()


/** 找数组中的最小值及其下标 */
function getMin(arr) {
    let obj = {}
    obj.min = arr[0]
    obj.index = 0
    for (let i = 1, len = arr.length; i < len; i++) {
        if (obj.min > arr[i]) {
            obj.min = arr[i]
            obj.index = i
        }
    }
    return obj
}

/** 模拟懒加载 */
lazyLoading()
function lazyLoading() {
    window.addEventListener('scroll', function () {
        if (window.pageYOffset + window.innerHeight > getMin(arrHeight).min) {
            let json = [
                { "src": "./images/P_000.jpg" },
                { "src": "./images/P_001.jpg" },
                { "src": "./images/P_002.jpg" },
                { "src": "./images/P_003.jpg" },
                { "src": "./images/P_004.jpg" },
                { "src": "./images/P_005.jpg" },
                { "src": "./images/P_006.jpg" },
                { "src": "./images/P_007.jpg" },
                { "src": "./images/P_008.jpg" },
                { "src": "./images/P_009.jpg" },
                { "src": "./images/P_010.jpg" },
                { "src": "./images/P_011.jpg" },
                { "src": "./images/P_012.jpg" },
                { "src": "./images/P_013.jpg" },
                { "src": "./images/P_014.jpg" },
                { "src": "./images/P_015.jpg" },
                { "src": "./images/P_016.jpg" },
                { "src": "./images/P_017.jpg" },
                { "src": "./images/P_018.jpg" },
                { "src": "./images/P_019.jpg" }
            ];
            for (let i = 0, len = json.length; i < len; i++) {
                let liEle = document.createElement('li')
                let imgEle = document.createElement('img')
                imgEle.src = json[i].src
                liEle.appendChild(imgEle)
                bigBox.children[0].appendChild(liEle)
            }
            waterFull()
        }
    })
}